<template>
	<!-- 行情 -->
	<!-- @scrolltolower="next()" -->
	<scroll-view class="wrapper" scroll-y="true" >
		<view class="top">
			<!-- 币种 -->
			<view class="core">币种</view>
			<view class="arr">
				<image src="../../static/bizhan/top-arr.png" mode=""></image>
				<image src="../../static/bizhan/down-arr.png" mode=""></image>
			</view>

			<!-- 最新价 -->
			<view class="new">最新价</view>
			<view class="arr">
				<image src="../../static/bizhan/top-arr.png" mode=""></image>
				<image src="../../static/bizhan/down-arr.png" mode=""></image>
			</view>

			<!-- 24H涨跌 -->
			<view class="hour">24H涨跌</view>
			<view class="arr">
				<image src="../../static/bizhan/top-arr.png" mode=""></image>
				<image src="../../static/bizhan/down-arr.png" mode=""></image>
			</view>
		</view>
		<!-- 公共样式1 -->
		<view class="common" v-for="(val, index) in applyData" :key="val.id" @tap="add(val.currency,val.price,val.name,index+1)">
			<!-- 左边样式 -->
			<view class="left">
				
				<view class="bigname">
					<image style="width: 88upx; height:88upx;display: inline-block;" :src="val.iconUrl" mode="aspectFill"></image>
				</view>
			<view class="name_lang">
				<view class="nam_b">
					<text class="font" style="color: #fff;">{{ val.currency }} </text>
					<text class="china">{{ val.name }}</text>
				</view>
				<view class="nam_su">
					<view class="chengjiaoliang">{{index+1}} 成交量 {{ val.vol>10000 ? `${(val.vol / 100000000 ).toFixed(2)}亿`: val.vol}}</view>
				</view>
			</view>
				

				<!-- 定位的盒子 -->
				<!-- <view class="dingwei">10X</view> -->
			</view>
			<!-- 中间样式 -->
			<view class="center">
				<view>{{ val.price  }}</view>
				<!-- 				<view>5,499.3</view>
				<view>¥38,291.63</view> -->
			</view>
			<!-- 右边样式 -->
			<view class="right">
				<view :class="{ teshu:val.change < 0  }">
					<text v-if="val.change"></text>
					{{ val.change}}%
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
export default {
	data() {
		return {
			applyData: [],
			// page: 1,
		
		};
	},
	
	created() {
		// this.getBiInfoPage();
		this.find()
	
	},
	methods: {
		find(){
			this.$ajax(
			this.apiList.BiZhiPaiMing
			).then(res=>{
				this.list =  res.data
				// console.log(this.list[0])
				let	ls =[];
				for(let i= 0; i<50; i++ ) {
					ls.push(this.list[i])
						this.applyData = ls
				}
			})
			// uni.request({
			// 	url: 'http://api.coindog.com/api/v1/currency/ranks',
			// 	method:"GET",
			// 	success: (res) => {
			// 		this.list =  res.data
			// 		// console.log(this.list[0])
			// 		let	ls =[];
			// 		for(let i= 0; i<50; i++ ) {
			// 			ls.push(this.list[i])
			// 				this.applyData = ls
			// 		}
			// 	}
			// })
		},
		add(currency,price,names,index){
			uni.navigateTo({
				url:'find_kbobbin?currency='+currency+'&price='+price+'&names='+names+'&index='+index
			
			})
		},
		openUrl(url) {
			// #ifdef APP-PLUS
			plus.runtime.openWeb(url);
			// #endif

			// #ifdef H5
			window.location.href = url;
			// #endif
		},
		// next() {
		// 	this.page++;
		// 	this.getBiInfoPage();
		// },
		// getBiInfoPage() {
		// 	this.$ajax(
		// 		'bi/getBiInfoPage',
		// 		{
		// 			page: this.page
		// 		},
		// 		'POST'
		// 	).then(res => {
		// 		res.data.data.forEach(item => {
					
		// 			if (item.change24h < 0) {
		// 				return (item.boo = true);
		// 			} else {
		// 				return (item.boo = false);
		// 			}
		// 		});
		// 		// console.log(res.data.data);
		// 		this.applyData.push(...res.data.data);
		// 	});
		// }
	}
};
</script>

<style lang="less">
page {
	background-color:#0E1B45;
}
.core {
	color: #fff;
}
.top {
	margin: auto 30rpx;
	display: flex;
	align-items: center;
	height: 60rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(153, 153, 153, 1);
	image {
		margin-top: 6rpx;
		margin-left: 10rpx;
		width: 12rpx;
		height: 8rpx;
	}

	.arr {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.new {
		width: 370rpx;
		text-align: right;
		color: #fff;
	}

	.hour {
		text-align: right;
		flex: 1;
		color: #fff;
	}
}

.common {
	border-bottom: 1upx solid rgba(0,133,193,.2);
	
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 140rpx;
	margin: 20upx 32rpx;
	padding-left:20upx ;
	.chengjiaoliang {
		margin-top: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
	}

	.left {
		padding-right: 30rpx;
		position: relative;
		display: flex;
		// flex-direction: column;
		justify-content: space-between;
		
		.dingwei {
			position: absolute;
			left: 200rpx;
			width: 52rpx;
			line-height: 36rpx;
			height: 36rpx;
			text-align: center;
			background: rgba(255, 166, 30, 1);
			border-radius: 8px;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
	}

	.center {
		flex: 1;
		display: flex;
		align-items: flex-end;
		flex-direction: column;
		padding-right: 43rpx;
	
	}

	.right {
		line-height: 60rpx;
		text-align: center;
		width: 168rpx;
		height: 60rpx;
		
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(77, 184, 114, 1);
	}
}

.left text:nth-child(1) {
	padding-right: 10rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
}

.left .bigname:last-child {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #666;
}
.bigname {
	display: flex;
	align-items: center;
	
	.name_lang {
		display: flex;
	
	}
}
.bigname image {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}
.font {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #fff;
}
.china {
	font-size: 20upx;
	color: #fff;
	margin-left: 10upx;
}

.center view:nth-child(1) {
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #fff;
}

.center view:nth-child(2) {
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(77, 184, 114, 1);
}

.center view:nth-child(3) {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(153, 153, 153, 1);
}

.teshu {
	line-height: 60rpx;
	text-align: center;
	width: 168rpx;
	height: 60rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color:  rgba(255, 53, 67, 1);
	
}

.center .teshu {
	font-color: #ff3543;
}
</style>
